<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="proid" label="编号" width="150" />
    <el-table-column prop="img1" label="图片" width="150">
      <template #default="scope">
        <img class="img" :src="scope.row.img1">
      </template>
    </el-table-column>
    <el-table-column prop="category" label="种类" width="80" />
    <el-table-column show-overflow-tooltip prop="desc" label="名称" width="250" />
    <el-table-column prop="brand" label="品牌" width="80" />
    <el-table-column prop="originprice" label="价格" width="80" />
    <el-table-column prop="discount" label="折扣" width="80" />
    <el-table-column prop="sales" label="销量" width="140" />
    <el-table-column prop="stock" label="库存" width="80" />

   
  </el-table>
  
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="changePage" />
   
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

import service from '../../../utils/service';
//搜索


const loading = ref(true)



// 定义查询结果
interface IGoods {
  brand: string,
  category: string,
  desc: string,
  discount: number,
  img1: string,
  isrecommend: number,
  issale: number,
  isseckill: number,
  originprice: number,
  proid: string,
  proname: string,
  sales: number,
  stock: number
}

const total = ref(0);
const list = reactive<IGoods[]>([]);

const params = reactive<{
  count: number,
  limitNum: number
}>({
  count: 1,
  limitNum: 12
})
const searchFn = () => {
  service({
    url: "/pro/list",
    method: "get",
    params
  })
    .then(res => {
      if (res.data.code === "200") {
        total.value = res.data.total
        list.length = 0;
        list.push(...res.data.data);

      }
    })
}

searchFn();
const changePage = (value:number)=>{
  params.count = value;
  searchFn();
}

</script>

<style scoped>
.img {
  width: 100px;
  height: 100px;
}
 
body {
  margin: 0;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>